<template>
  <view v-if="!isEmpty">
    <view v-if="goodsItem?.productImg" class="orderDetile">
      <view class="top">
        <image :src="goodsItem?.productImg" mode="heightFix" />
      </view>
      <view class="bottom">
        <view class="goodsName">
          <view>{{ goodsItem?.productName }}</view>
        </view>
        <view class="goodsPrice">
          <text class="userMoney"
            >￥{{
              shopMode == 6 ? goodsItem?.money : goodsItem?.userMoney
            }}</text
          >
          <text class="ScoreMoney" v-if="goodsItem?.userScoreMoney != 0">
            {{ shopMode == 6 ? '-' : '+' }}
            {{ goodsItem?.userScoreMoney
            }}{{ enumAll.SHOPMODEL[shopMode] }}</text
          >
          <text class="money" v-if="goodsItem?.money != goodsItem?.userMoney"
            >￥{{ goodsItem?.money }}</text
          >
        </view>
        <van-text-ellipsis
          style="font-size: 24rpx; color: #949496"
          v-if="goodsItem?.des"
          :content="goodsItem?.des"
          expand-text="展开"
          collapse-text="收起"
          :expand="isExpanded"
          @click="isExpanded = !isExpanded"
        />
        <!-- 肯德基1/麦当劳5 -->
        <GoodsChoose1
          v-if="shopData.shopBrandId == 1 || shopData.shopBrandId == 5"
          @chooseOptional="handleChooseOptional"
          :product="goodsDetail"
          :productChoose="goodsItem?.productChoose"
        />
        <!-- 瑞幸 -->
        <GoodsChoose13
          v-if="shopData.shopBrandId == 13"
          @chooseOptional="handleChooseOptional"
          :product="goodsDetail"
          :productChoose="goodsProductChoose"
        />
        <!-- 库迪 -->
        <GoodsChoose41
          v-if="shopData.shopBrandId == 41"
          @chooseOptional="handleChooseOptional"
          :product="goodsDetail"
          :productChoose="goodsProductChoose"
        />
        <!-- 星巴克 -->
        <GoodsChoose10
          v-if="shopData.shopBrandId == 10"
          @chooseOptional="handleChooseOptional"
          :product="goodsDetail"
          :productChoose="goodsProductChoose"
        />
        <!-- 喜茶 -->
        <GoodsChoose19
          v-if="shopData.shopBrandId == 19"
          @chooseOptional="handleChooseOptional"
          :product="goodsDetail"
          :productChoose="goodsProductChoose"
        />
        <!-- 奈雪的茶 -->
        <GoodsChoose2
          v-if="shopData.shopBrandId == 2"
          @chooseOptional="handleChooseOptional"
          :product="goodsDetail"
          :productChoose="goodsProductChoose"
        />
      </view>
      <CartFooter
        v-if="goodsItem"
        :shopData="shopInfo"
        :goodsItem="goodsItem"
      ></CartFooter>
    </view>
    <u-loadmore v-else status="loading" />
  </view>

  <!-- 空状态 -->
  <u-empty v-else :src="kf" :text="text" mode="list">
    <template #bottom>
      <van-button
        style="margin-top: 20rpx"
        round
        @click="retry"
        type="primary"
        class="bottom-button"
        >返回</van-button
      >
    </template>
  </u-empty>
</template>

<script setup lang="ts">
import {
  onReady,
  onShow,
  onLoad,
  onReachBottom,
  onPageScroll,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'
import { computed, reactive, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
// #region ***************** 组件 *************************/
import GoodsChoose1 from './goodsChoose/c_goodsChoose_1.vue'
import GoodsChoose13 from './goodsChoose/c_goodsChoose_13.vue'
import GoodsChoose41 from './goodsChoose/c_goodsChoose_41.vue'
import GoodsChoose10 from './goodsChoose/c_goodsChoose_10.vue'
import GoodsChoose19 from './goodsChoose/c_goodsChoose_19.vue'
import GoodsChoose2 from './goodsChoose/c_goodsChoose_2.vue'
import CartFooter from './c_cartFooter.vue'
// #region ***************** api *************************/
import { productApi, orderApi, moneyApi, enumAll } from '@/api'
// #region ***************** 工具 *************************/
import { useGoodStore } from '@/store'
import { browserVersion } from '@/utils/common'
//  #endregion
// #region ***************** 图片 *************************/
import shopIcn from '@/static/xfl/shopIcn2.png'
import kf from '@/static/xfl/kf2.png'
//  #endregion

// 初始数据
const shopMode = ref()
const goodStore = useGoodStore()
const goodsNum = ref(1)
const goodsItem = ref<any>() //当前商品的信息
const goodsChoose = ref<any>()
const shopData = ref()
const shopInfo = ref()
const isApp = ref(false)
const textEnd = ref('加入购物车')
const goodsProductChoose = ref<any>(false) //是否有规格
const goodsDetail = ref<any>() //商品的小料
const matchedSku = ref<any>() //商品选中的小料
const isEmpty = ref(false) //当前选中
const isExpanded = ref(true) //展开
const text = ref('该平台入驻店铺暂时无法下单,请稍后再试...')
//获取当前商品详情
const getGoodsDetile = async (item: any) => {
  item.shopMode = shopMode.value
  try {
    const { data } = await productApi.getShopProductDetails(item)
    if (data) {
      goodsItem.value = { ...data, ...shopData.value }
      if (goodsItem.value.details) {
        goodsItem.value.details = JSON.parse(goodsItem.value.details)
      }
      goodsDetail.value = goodsItem.value.details
      console.log(goodsDetail.value, '商品111详情小料')

      goodsProductChoose.value = goodsItem.value.productChoose
  

      // 每一个品牌的详情字段不同 productDescription
      switch (data.brandId) {
        case 19: //喜茶
          goodsItem.value.des = data.productDescription
          break

        default:
          break
      }
    }
    isEmpty.value = false
  } catch (error) {
    console.log('接口报错', error)
    isEmpty.value = true
  }
}

function retry() {
  uni.navigateBack() // 返回上一页重试
}

//处理小料
const handleChooseOptional = (updatedProduct: any) => {
  if (!goodsItem.value) {
    return
  }
  goodsItem.value.details = updatedProduct
  // 可选：打印调试信息
  console.log('更新后的商品详情:', updatedProduct)
}

onLoad((option: any) => {
  shopData.value = option
  shopInfo.value = JSON.parse(JSON.stringify(option))
  shopMode.value = option?.shopMode
    ? option?.shopMode
    : uni.getStorageSync('shopMode')
  getGoodsDetile(option)
})
</script>

<style lang="scss" scoped>
.orderDetile {
  height: 100vh;
  background-color: #fff;

  .top {
    // width: 100%;
    height: 450rpx;
    text-align: center;
    background-color: #fff;
    z-index: -10;
  }

  .bottom {
    padding: 40rpx;
    // height: calc(100vh - 400rpx);
    background-color: #fff;
    border-radius: 40rpx;
    box-shadow: 16rpx -56rpx 100rpx 0rpx rgba(0, 0, 0, 0.07);

    // 小料
    .goodsSize1 {
      .goodsSize1_1 {
        margin: 20rpx 0;
      }
    }

    .goodsName {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      font-weight: 700;
      margin: 20rpx 0;
    }

    .goodsPrice {
      .userMoney {
        font-size: 50rpx;
        font-weight: 700;
        color: #f05a5a;
      }

      .ScoreMoney {
        margin-right: 20rpx;
        font-size: 24rpx;
        color: #f05a5a;
      }

      .money {
        font-weight: normal;
        font-size: 26rpx;
        text-decoration: line-through;
        color: #b7b7b7;
      }
    }

    .goodesDes {
      font-size: 20rpx;
      color: #b7b7b7;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 240rpx;
    background-color: #fff;
    box-shadow: 16rpx -38rpx 100rpx 0rpx rgba(0, 0, 0, 0.07);

    .stepper {
      height: 80rpx;
      background-color: #fff;
    }

    .bootom {
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // height: 100%; // 确保占满父容器高度

      .custom-price {
        // display: flex;
        height: 100rpx;
        // align-items: baseline; // 使用 baseline 对齐，使整数和小数部分垂直对齐
        font-size: 24rpx;
        // margin: 0 50rpx;
        // margin-left: 150rpx;

        .price-integer {
          color: #e64340;
          font-weight: bold;
          font-size: 36rpx; // 整数部分字体更大
          margin-right: 8rpx; // 调整间距，使 . 和小数部分紧贴
        }

        .price-decimal {
          color: #e64340;
          font-size: 24rpx; // 小数部分字体正常大小
          margin-left: -8rpx; // 调整间距，使 . 和小数部分紧贴
        }

        .original-price {
          color: #999;
          text-decoration: line-through;
          margin: 0 10rpx; // 原价与现价之间的间距
        }
      }

      .custom-style {
        color: #fff;
        background-color: #ff6c18;
      }

      .textMonry {
        margin-right: 30rpx;
        font-size: 24rpx;
        color: #e0a66c;
      }
    }
  }
}

:deep(.van-stepper--round .van-stepper__plus) {
  background-color: #ff6c18;
}

:deep(.van-stepper--round .van-stepper__minus) {
  color: #ff6c18;
  border: 2rpx solid #ff6c18;
}

:deep(.van-submit-bar__bar) {
  justify-content: space-between;
  margin: 10rpx 0;
  margin-bottom: 40rpx;
}
</style>
